<script setup>
import { ref,reactive,computed,watch,watchEffect,onMounted,nextTick} from "vue";

const props=defineProps({
	type:{
		type:String,//default|affirm|delete
		default:"default",
	},
	plain:{
		type:Boolean,
		default:false,
	},
	round:{
		type:Boolean,
		default:false,
	}
})
const emits=defineEmits([])

</script>


<template>
	<button class="zi-button" :class="[type,{
		plain,round
	}]">
		<span>
			<slot>按钮</slot>
		</span>
	</button>
<!-- 
	<button class="zi-button default">
		<span>text</span>
	</button>
	<button class="zi-button affirm">
		<span>text</span>
	</button>
	<button class="zi-button delete">
		<span>text</span>
	</button>
	<button class="zi-button default plain">
		<span>text</span>
	</button>
	<button class="zi-button affirm plain">
		<span>text</span>
	</button>
	<button class="zi-button delete plain">
		<span>text</span>
	</button>
	
	<button class="zi-button default plain round">
		<span>text</span>
	</button>
	<button class="zi-button affirm plain round">
		<span>text</span>
	</button>
	<button class="zi-button delete plain round">
		<span>text</span>
	</button> -->
</template>


<style scoped>
.zi-button{
	border-radius: 5px;
	display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 0.6em 2em;
    font-size: 14px;
    border-radius: 4px;
	margin: 10px;

	--zi-default-color:#606266;
	--zi-default-background-color:#FFF;
	--zi-default-border-color:#DCDFE6;

	--zi-default-hover-color:#606266;
	--zi-default-hover-background-color:#ebf5fd;
	--zi-default-hover-border-color:#DCDFE6;

	--zi-default-active-color:#606266;
	--zi-default-active-background-color:#ebf5fd;
	--zi-default-active-border-color:#2196F3;

	--zi-affirm-color:#ffffff;
	--zi-affirm-background-color:#2196F3;
	--zi-affirm-border-color:#2196F3;

	--zi-affirm-hover-color:#ffffff;
	--zi-affirm-hover-background-color:#30a1fd;
	--zi-affirm-hover-border-color:#2196F3;

	--zi-affirm-active-color:#ffffff;
	--zi-affirm-active-background-color:#0f7fdb;
	--zi-affirm-active-border-color:#0f7fdb;


	--zi-delete-color:#ffffff;
	--zi-delete-background-color:#d30000;
	--zi-delete-border-color:#d30000;

	--zi-delete-hover-color:#ffffff;
	--zi-delete-hover-background-color:#ff1515;
	--zi-delete-hover-border-color:#ff1515;

	--zi-delete-active-color:#ffffff;
	--zi-delete-active-background-color:#e00b0b;
	--zi-delete-active-border-color:#e00b0b;


	--zi-plain-default-color:#606266;
	--zi-plain-default-background-color:#ffffff;
	--zi-plain-default-border-color:#DCDFE6;

	--zi-plain-default-hover-color:#2196F3;
	--zi-plain-default-hover-background-color:#ffffff;
	--zi-plain-default-hover-border-color:#2196F3;

	--zi-plain-default-active-color:#006dc7;
	--zi-plain-default-active-background-color:#ffffff;
	--zi-plain-default-active-border-color:#006dc7;

	--zi-plain-delete-color:#d30000;
	--zi-plain-delete-background-color:#fde6e6;
	--zi-plain-delete-border-color:#d30000;

	--zi-plain-delete-hover-color:#ffffff;
	--zi-plain-delete-hover-background-color:#ff1515;
	--zi-plain-delete-hover-border-color:#ff1515;

	--zi-plain-delete-active-color:#ffffff;
	--zi-plain-delete-active-background-color:#e00b0b;
	--zi-plain-delete-active-border-color:#e00b0b;

	--zi-plain-affirm-color:#2196F3;
	--zi-plain-affirm-background-color:#ebf5fd;
	--zi-plain-affirm-border-color:#2196F3;

	--zi-plain-affirm-hover-color:#ffffff;
	--zi-plain-affirm-hover-background-color:#30a1fd;
	--zi-plain-affirm-hover-border-color:#30a1fd;

	--zi-plain-affirm-active-color:#ffffff;
	--zi-plain-affirm-active-background-color:#0f7fdb;
	--zi-plain-affirm-active-border-color:#0f7fdb;
}

.default{
    color: var(--zi-default-color);
    background-color:var(--zi-default-background-color) ;
    border: 1px solid var(--zi-default-border-color);
}
.default:hover{
    color: var(--zi-default-hover-color);
    background-color: var(--zi-default-hover-background-color);
	border-color: var(--zi-default-hover-border-color);
}
.default:active{
    color: var(--zi-default-active-color);
    background-color: var(--zi-default-active-background-color);
	border-color: var(--zi-default-active-border-color);
}
.affirm{
    color: var(--zi-affirm-color);
    background-color:var(--zi-affirm-background-color) ;
    border: 1px solid var(--zi-affirm-border-color);
}
.affirm:hover{
    color: var(--zi-affirm-hover-color);
    background-color: var(--zi-affirm-hover-background-color);
	border-color: var(--zi-affirm-hover-border-color);
}
.affirm:active{
    color: var(--zi-affirm-active-color);
    background-color: var(--zi-affirm-active-background-color);
	border-color: var(--zi-affirm-active-border-color);
}
.delete{
    color: var(--zi-delete-color);
    background-color:var(--zi-delete-background-color) ;
    border: 1px solid var(--zi-delete-border-color);
}
.delete:hover{
    color: var(--zi-delete-hover-color);
    background-color: var(--zi-delete-hover-background-color);
	border-color: var(--zi-delete-hover-border-color);
}
.delete:active{
    color: var(--zi-delete-active-color);
    background-color: var(--zi-delete-active-background-color);
	border-color: var(--zi-delete-active-border-color);
}

.plain.default{
    color: var(--zi-plain-default-color);
    background-color:var(--zi-plain-default-background-color) ;
    border: 1px solid var(--zi-plain-default-border-color);
}

.plain.default:hover{
    color: var(--zi-plain-default-hover-color);
    background-color: var(--zi-plain-default-hover-background-color);
	border-color: var(--zi-plain-default-hover-border-color);
}
.plain.default:active{
    color: var(--zi-plain-default-active-color);
    background-color: var(--zi-plain-default-active-background-color);
	border-color: var(--zi-plain-default-active-border-color);
}

.plain.delete{
    color: var(--zi-plain-delete-color);
    background-color:var(--zi-plain-delete-background-color) ;
    border: 1px solid var(--zi-plain-delete-border-color);
}
.plain.delete:hover{
    color: var(--zi-plain-delete-hover-color);
    background-color: var(--zi-plain-delete-hover-background-color);
	border-color: var(--zi-plain-delete-hover-border-color);
}
.plain.delete:active{
    color: var(--zi-plain-delete-active-color);
    background-color: var(--zi-plain-delete-active-background-color);
	border-color: var(--zi-plain-delete-active-border-color);
}

.plain.affirm{
    color: var(--zi-plain-affirm-color);
    background-color:var(--zi-plain-affirm-background-color) ;
    border: 1px solid var(--zi-plain-affirm-border-color);
}
.plain.affirm:hover{
    color: var(--zi-plain-affirm-hover-color);
    background-color: var(--zi-plain-affirm-hover-background-color);
	border-color: var(--zi-plain-affirm-hover-border-color);
}
.plain.affirm:active{
    color: var(--zi-plain-affirm-active-color);
    background-color: var(--zi-plain-affirm-active-background-color);
	border-color: var(--zi-plain-affirm-active-border-color);
}

.round{
	border-radius: 3em;
}
</style>